<template>
  <div class="a">
  <div class="b">
  <div class="container mt-5">
    <div class="row">
      <div class="col-md-8" >
        <!-- 工作 -->
        <h2 style="font-size: 28px; font-weight: 600; color: #fff;
         line-height: 40px; margin-right: 100px; margin-top: 1px;max-width: 360px; padding: 40px 0 0 40px">{{jobDetailArr.title}}
          <span style="padding: 25px 0 0 25px;color: #f26d49;">{{jobDetailArr.salary}}</span>   <!-- 工资 -->
        </h2>
        <el-icon style="padding: 0 0 0 10px;color: white"><Location /></el-icon>
        <span style="font-size: 14px; color: #fff;margin-right: 20px; padding: 0 0 0 10px">{{jobDetailArr.companyPosition}}</span>  <!-- 工作地点 -->
        <span style="color: white">工作经验：{{jobDetailArr.experience}}</span>
        <span style="color: white">学历要求：{{jobDetailArr.degree}}</span>
        <div style="padding: 0 0 0 20px">
        <el-button type="primary" style="float: left;">感兴趣</el-button>
        <el-button type="danger">收藏起来</el-button>
        </div>
      </div>
    </div>
      <div style="padding-top:80px ">
        <h3>职位描述</h3>

        <p>{{jobDetailArr.jobType}}</p>
        <h4>{{jobDetailArr.categoryName}}</h4>
        <ul>
          <li>{{jobDetailArr.post}}</li>
          <li>{{jobDetailArr.jobRequire}}</li>
          <li>{{jobDetailArr.experience}}</li>
        </ul>
        <hr>
<!--        /////////////////////////////////////////////////////////////////////////////-->
        <h4>公司介绍</h4>
        <p>{{jobDetailArr.companyName}}</p>
        <ul>
          <li>{{jobDetailArr.devHistory}}</li>
        </ul>
      </div>
      </div>
    <hr>
    <div>
      <h4>单位联系人</h4>

      <span><el-avatar
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
      />{{jobDetailArr.username}}</span>
      <p>{{jobDetailArr.businessInformation}}</p>
    </div>
<!--      <div class="col-md-4">-->
<!--        &lt;!&ndash; 公司信息 &ndash;&gt;-->
<!--        <div class="card">-->
<!--          <div class="card-body">-->
<!--            <h4>{{job.company}}</h4>-->
<!--            <p>{{job.industry}}</p>-->
<!--            <p>{{job.scale}}</p>-->
<!--            <p>{{job.address}}</p>-->
<!--            <a :href="'tel:'+job.phone">{{job.phone}}</a>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
    </div>
  </div>
</template>

<script setup>
// export default {
//   data() {
//     return {
//       job: {
//         title: 'JAVA开发工程师',
//         location: '北京',
//         type: '1-3年',
//         number: '本科',
//         salary: '10k-20k',
//         requirements: [
//           '本科以上学历',
//           '三年以上前端开发经验',
//           '熟练掌握 Vue.js 框架',
//           '熟悉 HTML、CSS、JavaScript 等前端技术',
//           '有良好的团队合作精神和沟通能力'
//         ],
//         company: 'ABC 公司',
//         industry: '互联网',
//         scale: '100-200人',
//         address: '北京市海淀区中关村',
//         phone: '123456789'
//       }
//     }
//   }
// }
import {onMounted, ref} from "vue";
import axios from "axios";

const jobDetailArr = ref({});
const jobId = ref({jobId:'1'})
const job = () =>{
  //根据id请求job内容
  // jobId.value.jobId=id;
  axios.get('http://localhost:39287/job/v1/jobDetail/'+jobId.value.jobId).then((response) =>{
    if (response.data.state==20000){

      jobDetailArr.value = response.data.data;
      console.log('5164619199'+response.data.data);
    }
  })
}

onMounted(()=>{
 job();
})
</script>
<style scoped>
.a{
  position: relative;
  height: 1200px;width: 100%;background-color: powderblue;
}
.b{
  position: absolute;
  height: 220px; width: 100%;background-color: #444c60;
}
</style>